<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <p>标签式导航栏</p>
    <ul class="nav nav-tabs">
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">Android</a></li>
        <li><a href="#">Git</a></li>
        <li><a href="#">JS</a></li>
        <li><a href="#">H5</a></li>
    </ul>
    <br>

    <p>胶囊式标签导航菜单</p>
    <ul class="nav nav-pills">
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">Android</a></li>
    </ul>
    <br>

    <p>垂直胶囊式导航菜单</p>
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">SVN</a></li>
        <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">iOS <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Swift</a> </li>
                <li><a href="#">Object-C</a> </li>
            </ul>
        </li>
        <li><a href="#">Java</a></li>
        <li><a href="#">Android</a></li>
    </ul>

    <p>两端对齐导航菜单</p>
    <ul class="nav nav-pills nav-stacked nav-justified">
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">Java</a></li>
        <li  class="disabled"><a href="#">Android(禁用链接)</a></li>
    </ul>

    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">W3Cschool</a>
        </div>

        <div>
            <ul class="nav navbar-nav">
                <li><a href="#">iOS</a></li>
                <li><a href="#">Android</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">前端 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">HTML5</a></li>
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">Css</a></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">Bootstrap</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <p>响应式导航</p>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand">W3CSchool</a>
        </div>

        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Swift</a></li>
                <li><a href="#">OC</a></li>
            </ul>
        </div>
    </nav>

    <p>导航栏中的表单</p>
    <nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">学习</a>
        </div>
        <div>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>
            <button type="button" class="btn btn-default navbar-btn navbar-left">导航栏按钮</button>
            <p class="navbar-text">导航栏中的文本<a href="#" class="navbar-link">链接</a></p>
        </div>
    </nav>

    <br>
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">2013</a> </li>
        <li class="active">十一月</li>
    </ol>
</div>


<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>